<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>墨芽豆直播间</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../libs/thirdpart/elementui/index.css">
    <link rel="stylesheet" href="./../css/style.css">
    <link rel="stylesheet" href="./../css/api.css">
    <script src="./../js/base.js"></script>
    <script src="../libs/thirdpart/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../libs/thirdpart/elementui/index.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body,
        #app_box {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .title {
            margin: 10px 0;
            text-align: center;
        }
        
        .text-right {
            text-align: right;
        }
        
        .promption {
            color: #A0A0A0
        }
        
        .im-log-box {
            width: 100%;
            height: 100%;
            border: 1px solid #999;
            margin: 0px;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: hidden;
        }
        
        .im-log-box li {
            margin: 2px 5px;
            font-size: 14px;
            color: #666;
        }
        
        #video_wrap {
            height: 130px;
            display: flex;
        }
        
        #video_wrap>div {
            width: 200px;
            height: 100%;
            /* background-color: blue; */
        }
        
        #paint_box {
            position: relative;
            width: 998px;
            height: 560px;
            border: 1px solid #888;
            overflow: hidden;
            box-sizing: content-box;
            margin: 0 auto;
        }
        
        .el-header,
        .el-footer {
            padding: 0 !important;
        }
        
        .el-main {
            padding: 0 !important;
            overflow: hidden !important;
            height: 100%;
        }
        
        .el-container {
            height: 100%;
            overflow: hidden;
        }
        
        .el-tabs__header {
            margin: 0;
        }
        
        .el-icon-arrow-left,
        .el-icon-arrow-right {
            font-size: 20px;
        }
        
        .version-info {
            font-size: 14px;
            color: #606266;
        }
        
        .left {
            padding: 20px 30px;
            width: 360px;
        }
        
        .news {
            height: 300px;
        }
        
        .news .el-container {
            overflow: visible;
        }
        
        .center {
            width: 1000px;
        }
        
        .center_box {
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .closeWin {
            position: absolute;
            right: 50px;
            top: 5px;
            z-index: 999;
            cursor: pointer;
        }
        
        .closeWin img {
            width: 30px;
        }
        
        .gongjubox {
            display: flex;
            justify-content: space-between;
            padding-right: 48px;
        }
        
        .gongju {
            margin-bottom: 20px;
        }
        
        .gongju img {
            width: 20px;
            cursor: pointer;
        }
        
        #videoTeacher {
            width: 50px;
            height: 50px;
            background-color: #fff;
            z-index: 999;
            bottom: 0;
            left: 0z;
        }
        
        .videoBox {
            position: absolute;
            z-index: 999;
        }
        
        .videoBox span {
            position: absolute;
        }
        
        .videoBox img {
            width: 30px;
            height: 25px;
        }
        
        .videoBg {
            left: 10px;
            bottom: 10px;
        }
        
        .makeBg {
            right: 10px;
            bottom: 10px;
        }
        
        .main {
            width: 1400px;
            /* display: block;
            overflow: visible;
            height: auto; */
            padding-top: 30px;
            margin: 0 auto;
        }
        
        .baiban {
            width: 1000px;
            float: left;
        }
        
        .tuya {
            float: right;
            padding-top: 0px;
            margin-right: 30px;
        }
        
        .el-tabs__nav-scroll {
            display: none;
        }
        
        .classTip {
            height: 100px;
            overflow-y: auto;
            border: 1px solid #DCDFE6;
            padding: 15px;
            line-height: 23px;
            font-size: 14px;
            position: absolute;
            top: 660px;
            width: 1000px;
        }
        
        .doudou {
            position: absolute;
            right: 0;
            bottom: 36px;
            z-index: 999;
            text-align: center;
        }
        
        .doudou img {
            cursor: pointer;
        }
        
        .doudou p {
            margin-top: -10px;
        }
        
        .dasljkfhsd {
            position: relative;
        }
    </style>


</head>

<body>

    <div class="tip_alert" style="display: none;">
        <div class="tip_alert_box"></div>
    </div>
    <div id="app_box" class="container-fluid">
        <!-- <div class="loading" v-if="jiaocaiFlag">
            <div class="loading_box">
                <img src="./../image/loading.gif" alt="">
                <p>教材加载中请稍等!</p>
            </div>
            <div class="mask"></div>
        </div> -->
        <div @click="guanbi" class="closeWin" title="关闭直播间">
            <img src="../image/closeWin.png" alt="关闭直播间" title="关闭直播间">
        </div>
        <el-container style="display: none;" v-show="isShow" class="main">
            <!--中间部分  -->
            <el-main class="baiban">
                <el-container>
                    <div class="left" style="display: none;">
                        <div class="news" style="display: none;">
                            <el-container>
                                <el-main>
                                    <ul id="msg_box" class="im-log-box">
                                        <li v-for="msg in msgs">
                                            <span class="send">{{msg.send}}</span>
                                            <span class="content">{{msg.content}}</span>
                                            <span class="send">{{msg.time}}</span>
                                        </li>
                                    </ul>
                                </el-main>
                                <el-footer style="margin-top: 5px;">
                                    <el-row>
                                        <el-form :inline="true" class="demo-form-inline" size="mini">
                                            <el-form-item label="消息内容">
                                                <el-input v-model="imMsg.common.data" placeholder="text消息"></el-input>
                                            </el-form-item>
                                            <el-form-item label="接收人ID">
                                                <el-input v-model="imMsg.common.toUser" placeholder="不填表示给群组发消息">
                                                </el-input>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click="sendMsg">发送消息</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </el-row>
                                </el-footer>
                            </el-container>
                        </div>
                    </div>
                    <!--中间  白板区 -->
                    <div class="center">
                        <el-main class="dasljkfhsd">
                            <el-container>
                                <!-- <el-header style="height: 42px;">
                                    <el-tabs size="mini" v-model="currentFileId" closable type="card" @tab-remove="onDeleteFileById" @tab-click="onClickBoardTab">
                                        <el-tab-pane size="mini" :key="file.fid" v-for="file in fileInfoList" :label="file.title" :name="file.fid">
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-header> -->
                                <div class="center_box">
                                    <el-main>
                                        <div id="paint_box" style="background-color: rgb(240, 240, 240);"></div>
                                    </el-main>
                                </div>
                                <el-footer style="height: 80px;">
                                    <div style="text-align: center; padding-top: 30px; color: gray;" v-if="thumbUrls.length == 0">此文件不支持缩略图
                                    </div>
                                    <div style="overflow-x: scroll visible; overflow-y:hidden; white-space:nowrap; height:inherit; ">
                                        <img style="height: 100%; margin-right: 3px;" v-for="(item, index) in thumbUrls" :name="index" :src="item" v-on:click="onThumbClick(index)"><img>
                                    </div>
                                </el-footer>
                            </el-container>
                            <div class="classTip">
                                <h1>提词器</h1>
                                {{classTip}}
                            </div>
                        </el-main>

                    </div>
                </el-container>
            </el-main>

            <!--右边栏  -->
            <el-aside width="340px" class="tuya">
                <!--中间区  视频区 -->
                <div class="headerBox">
                    <el-header>
                        <el-container>
                            <el-header style="height: 42px;">
                                <el-button plain @click="startRTC" type="button" :disabled="status < STATUS_INCLASS" v-text="'开启摄像头'" size="mini"></el-button>
                                <el-button plain @click="pushScreen" :disabled="status < STATUS_INCLASS" v-text="'屏幕分享'" size="mini">
                                </el-button>
                            </el-header>
                        </el-container>
                    </el-header>
                    <div style="height:270px;">
                        <div id="video_wrap">
                            <div class="stuBox videoMake" id="stuBox" :class="{mask:videoStuFlag}">
                                <!-- 学生 -->
                                <div class="stuVideo video_box" id="" @click="onSetVideo">
                                    <img src="../image/video_act.png" alt="">
                                </div>
                                <div class="stuMake make_box" @click="onSetMake">
                                    <img src="../image/make_act.png" alt="">
                                </div>
                            </div>
                            <div class="teaBox videoMake" id="teaBox">
                                <!-- 老是 -->
                                <div class="teaVideo video_box" @click="toggleCamera">
                                    <img src="../image/video_act.png" alt="">
                                </div>
                                <div class="teaMake make_box" @click="toggleMic">
                                    <img src="../image/make_act.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <el-tabs type="border-card">
                    <!--右边栏 涂鸦操作 -->
                    <el-tab-pane>
                        <div class="doudou" @click="sendDou" :class="{point:sendCountFalg}">
                            <img src="../image/douzi.png" alt="" title="给学生发送豆豆">
                            <p>{{douNum}}/5</p>
                        </div>
                        <div class="gongjubox">
                            <div class="gongju">
                                <img :src="tool[0]" alt="笔" title="笔" :data-index="0" :data-type="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_PEN" @click="onSetToolType($event)">
                            </div>
                            <div class="gongju">
                                <img :src="tool[1]" alt="线" title="线" :data-index="1" :data-type="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_LINE" @click="onSetToolType($event)">
                            </div>
                            <div class="gongju">
                                <img :src="tool[2]" alt="圆形" title="圆形" :data-index="2" :data-type="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_OVAL" @click="onSetToolType($event)">
                            </div>
                            <div class="gongju">
                                <img :src="tool[3]" alt="正方形" title="正方形" :data-index="3" :data-type="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_RECT" @click="onSetToolType($event)">
                            </div>
                            <div class="gongju">
                                <img :src="tool[4]" alt="" title="文字" :data-index="4" :data-type="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_TEXT" @click="onSetToolType($event)">
                            </div>
                            <div class="gongju">
                                <img :src="tool[5]" alt="" title="橡皮" :data-index="5" :data-type="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_ERASER" @click="onSetToolType($event)">
                            </div>
                            <div class="gongju">
                                <img :src="tool[6]" alt="" title="激光笔" :data-index="6" :data-type="TEduBoard.TOOL_TYPE.TEDU_BOARD_TOOL_TYPE_LASER" @click="onSetToolType($event)">
                            </div>
                        </div>
                        <el-form ref="form" size="mini">
                            <el-form-item>
                                允许涂鸦
                                <el-switch class="switchBtn" v-model="drawEnable" @change="onSetDrawEnable" active-color="#13ce66" inactive-color="#ccc">
                                </el-switch>
                                <div class="yanse">
                                    颜色
                                    <el-color-picker @active-change="onSetBrushColor" v-model="brushColor" size="mini">
                                    </el-color-picker>
                                </div>
                            </el-form-item>
                            <el-form-item label="">
                                <!-- <el-button @click="addBoard" v-text="'新增白板'"></el-button> -->
                                <el-button @click="onclearDraws" v-text="'清空涂鸦'"></el-button>
                                <label for="file_input" class="file_input">
                                    上传文件
                                    <!-- <img src="../image/updata.png" alt=""> -->
                                    <input id="file_input" type="file" @change="uploadFile"
                                        accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.ms-powerpoint, application/vnd.ms-excel">
                                </label>
                            </el-form-item>

                        </el-form>
                    </el-tab-pane>
                </el-tabs>

                <div class="paging">
                    <div class="prev" @click="prevBoard">
                        <img src="../image/prev.png" alt="">
                    </div>
                    <div class="pages">
                        {{boardData.current}}/{{boardData.total}}
                    </div>
                    <div class="next" @click="nextBoard">
                        <img src="../image/next.png" alt="">
                    </div>
                </div>
                <!-- <div class="douzi">
                    <div><img src="../image//douzi.png" alt=""></div>
                    <div><img src="../image//douzi.png" alt=""></div>
                    <div><img src="../image//douzi.png" alt=""></div>
                    <div><img src="../image//douzi.png" alt=""></div>
                    <div><img src="../image//douzi.png" alt=""></div>
                </div> -->
            </el-aside>
        </el-container>
    </div>

    <script src="../js/jquery-1.7.2.min.js"></script>

    <link href="https://resources-tiw.qcloudtrtc.com/thirdpart/videojs/video-js.min.css" rel="stylesheet">
    <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/videojs/video.min.js"></script>

    <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/axios/axios.min.js"></script>

    <!-- WebRTC SDK -->
    <script src="./../libs/trtc.js"></script>
    <!-- WebIM SDK -->
    <script src="https://resources-tiw.qcloudtrtc.com/webim/webim.min.js"></script>

    <!-- COS SDK -->
    <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/cos/5.1.0/cos.min.js"></script>

    <!-- 白板SDK -->
    <script src="https://resources-tiw.qcloudtrtc.com/board/2.4.4/TEduBoard.min.js"></script>
    <!-- <script src="libs/TEduBoard.min.js"></script> -->

    <!-- TIC SDK 可根据开源代码自行编译TIC-->
    <script src="https://resources-tiw.qcloudtrtc.com/tic/2.4.3/TIC.min.js"></script>
    <!-- <script src="../libs/tim-js.js"></script> -->


    <script src="../libs/thirdpart/purl.js"></script>
    <script src="../libs/thirdpart/vconsole.min.js"></script>
    <script src="../js/account_dev.js"></script>
    <!-- <script src="../js/main.js"></script> -->
    <script src="../js/main_live.js"></script>
    <script>
        if (location.href.indexOf('dev') > -1) {
            var vConsole = new VConsole();
            console.log(vConsole)
        }
    </script>
</body>

</html>